 <template>
  <div slot="book" style="margin-top: 20px">
    <a-row type="flex" justify="center">
      <a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
        <!-- 统一检索   纸书 -->
        <a-card :headStyle="headStyles" style="width: 100%">
          <search-box style="margin: 20px auto 40px"></search-box>
          <a-row
            type="flex"
            justify="space-around"
            align="middle"
            style="margin: 30px 0px"
          >
            <a-col :xs="23" :sm="23" :md="10" :lg="3" :xl="3">
              <img
                align="center"
                :src="details.cover ? details.cover : details.originalCover"
                width="100%"
                style="margin: 0 auto"
              />
            </a-col>

            <a-col :xs="24" :sm="24" :md="20" :lg="17" :xl="17">
              <a-row>
                <blockquote>
                  <div class="list-group-item-text text-muted" name="author">
                    <p>
                      期刊名称：
                      <span style="color: red">{{ details.title }}</span>
                    </p>
                    <p>
                      出版日期：<span style="color: red">{{
                        details.publish_date
                      }}</span>
                    </p>
                    <p>阅读人次： {{ details.play }}</p>
                    <p>出版社： {{ details.publisher }}</p>
                  </div>
                  <a-row type="flex">
                    <a-col :xs="24" :sm="24" :md="13" :lg="4" :xl="4">
                      <a
                        :href="details.read"
                        target="_blank"
                        title="原版阅读"
                        class="btn btn-success"
                      >
                        原版阅读
                      </a>
                    </a-col>
                  </a-row>
                </blockquote>
              </a-row>
            </a-col>
          </a-row>
          <div>
            <!-- 期刊简介 -->
            <a-collapse :bordered="true" :showArrow="false">
              <template #expandIcon="props">
                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
              </template>
              <a-collapse-panel
                key="1"
                header="期刊简介《点此展开收起》"
                :style="headStyles"
                :showArrow="false"
              >
                <p>{{ details.intro }}</p>
              </a-collapse-panel>
            </a-collapse>
            <!-- 目录 -->
            <a-collapse :bordered="true" :showArrow="false">
              <template #expandIcon="props">
                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
              </template>
              <a-collapse-panel
                key="1"
                header="目录《点此展开收起》"
                :style="headStyles"
                :showArrow="false"
              >
                <a-list
                  item-layout="horizontal"
                  v-for="(item, index) in muluText"
                  :key="index"
                >
                  <template>
                    <a-list-item>
                      <a href="https://www.antdv.com/"
                        >{{ index + 1 }}.{{ item.name }}</a
                      >
                    </a-list-item>
                  </template>
                  <a-list
                    item-layout="horizontal"
                    v-for="(items, indexs) in item.sublevels"
                    :key="indexs"
                  >
                    <template>
                      <a-list-item>
                        <a href="https://www.antdv.com/"
                          >--
                          <span style="margin-left: 10px"
                            >{{ index + 1 }}.{{ indexs + 1
                            }}{{ items.name }}</span
                          ></a
                        >
                      </a-list-item>
                    </template>
                  </a-list>
                </a-list>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// import axios from "axios";
// import VueAxios from "vue-axios";
import appApi from "../../../utils/api";
import SearchBox from "./common/SearchBox.vue";
export default {
  data: () => ({
    details: [],
    muluText: Array,
    is_bookinfo_visible: false,
    is_spinning: false,
    header: {},
    body: {},
    info: [],
    headStyles: {
      color: "#2780e3",
      background: "#f5f5f5",
    },
    customStyle: "background:#000,color:#2780e3",
  }),
  watch: {},
  components: {
    "search-box": SearchBox,
  },
  computed: {
    getquery() {
      return this.$store.state.ebook.books.detailquery;
    },
  },
  methods: {
    // 电子书

    GetEBookInfo: function () {
      this.is_bookinfo_spinning = true;
      var that = this;
      appApi
        .EbookInfo(that.$store.state.ebook.books.detailquery.id)
        .then((response) => {
          // 判断设备
          let flag = navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          );
          response.data.read = flag
            ? response.data.wx_read
            : response.data.pc_read;
          that.details = response.data;

          that.is_bookinfo_spinning = false;
        });
    },
  },
  mounted() {
    this.$store.commit("ebook/ChangeDetailQuery", this.$route.query);
    this.GetEBookInfo();
    //this.$store.dispatch(this.$store.state.Namedparent.name+'/epacall');
    // console.log(this.muluText)
    // var marc_no = this.$route.params.id;

    // console.log(" %c htis marc_no: ", "color:brown;", marc_no);
    // if (marc_no == this.bookid) {
    // if (!this.is_bookinfo_visible) {
    // this.is_bookinfo_visible = true;
    // this.GetBookInfo(marc_no);
    // this.$emit("ShowBookid", marc_no);
    // }
    // }
  },
};
</script>

<style scoped>
/deep/.ant-collapse {
  margin: 10px auto !important;
}
/deep/.ant-collapse-header {
  color: blueviolet !important;
}
.text-muted {
  font-size: 15px;
}
.text-muted p {
  border-bottom: 1px dashed #efefef;
  line-height: 2;
}
.text-muteds {
  text-align: center;
  margin: 5px auto;
}
.text-muteds p {
  margin: 0;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.btn-success {
  color: #ffffff;
  background-color: #3fb618;
  border-color: #3fb618;
  text-align: center;
  padding: 10px 10px;
  font-size: 15px;
  display: block;
}
.btn-primary {
  color: #ffffff;
  background-color: #2780e3;
  border-color: #2780e3;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-warning {
  color: #ffffff;
  background-color: #ff7518;
  border-color: #ff7518;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-danger {
  color: #ffffff;
  background-color: #ff0039;
  border-color: #ff0039;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
</style>
